<template>
  <div class="level-tag" @click="handleClick">
    <img class="level-icon" :src="currentSvg" />
  </div>
</template>

<script setup lang="ts" name="levelTag">
import { computed, defineComponent, defineProps, defineEmits } from "vue";
import lv0 from "./svg/lv0.svg";
import lv1 from "./svg/lv1.svg";
import lv2 from "./svg/lv2.svg";
import lv3 from "./svg/lv3.svg";
import lv4 from "./svg/lv4.svg";
import lv5 from "./svg/lv5.svg";
import lv6 from "./svg/lv6.svg";

const props = defineProps({
  level: {
    type: [Number, String],
    default: 0,
  },
});

// const emit = defineEmits('')

const svgs = [lv0, lv1, lv2, lv3, lv4, lv5, lv6];

const currentSvg = computed(() => {
  const level = Number(props.level);
  if (level < 0 || level > 6) {
    return svgs[0];
  }
  return svgs[level];
});

function handleClick() {}
</script>

<style scoped lang="less">
.level-tag {
  display: inline-block;
  cursor: pointer;
}

.level-icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
</style>
